<template>
  <div class="user">
    <!-- 输入加搜索加新增 -->
    <el-card>
      <el-form>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role_id" placeholder="请选择">
            <el-option
              v-for="item in user.role_id"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-button type="primary" style="margin-left: 10px" @click="searching">搜索</el-button>
        <el-button @click="clearEvent">清除</el-button>
        <el-button type="primary" @click="addEvent">+新增用户</el-button>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin-top: 10px">
      <el-table :data="roleList">
        <el-table-column label="序号" type="index" />
        <el-table-column label="用户名" prop="username" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="角色" prop="role" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="状态">
          <template #default="{ row }">
            <div :style="{ color: row.status === 0 ? 'red' : '' }">
              {{ row.status === 0 ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="{row}">
            <div>
              <el-button size="small" type="success" @click="deitEvernt(row)">编辑</el-button>
              <el-button size="small" type="info" @click="change(row.id)">{{ row.status===0?'启用':'禁用' }}</el-button>
              <el-button size="small" type="danger" @click="delEvent(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--  @size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
      <div class="pagination">
        <el-pagination
          background
          :current-page.sync="page.page"
          :page-sizes="[1, 2, 3, 4, 10, 50]"
          :page-size.sync="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="getData"
        />
      </div>
    </el-card>
    <add ref="add" :value="roleList" @getData="getData" />
  </div>
</template>

<script>
import { userList, userRemove, userStatus } from '@/api/userList'
import user from '@/csontant/user'
import Add from './components/add.vue'
import jsCookie from 'js-cookie'
export default {
  components: {
    Add
  },
  data() {
    return {
      user,
      total: 0,
      form: {
        username: '',
        email: '',
        role_id: ''
      },
      roleList: [],
      page: {
        page: 1,
        limit: +jsCookie.get('page') || 1
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await userList(this.page)
      console.log(res)
      this.total = res.data.pagination.total
      this.roleList = res.data.items
    },
    // 枚举中转换
    setStatus(status) {
      const find = user.statusList.find((item) => +item.id === +status)
      return find.value
    },
    // 清空表单
    clearEvent() {
      this.form = {
        userName: '',
        userEmsil: '',
        role: ''
      }
      this.getData()
    },
    // 新增用户
    addEvent(data) {
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 该页容量
    handleSizeChange() {
      this.getData()
      jsCookie.set('page', this.page.limit)
    },
    // 编辑
    deitEvernt(row) {
      this.$refs.add.show = true
      this.$refs.add.mode = 'deit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      row.status === '0' ? this.$refs.add.form.status = '禁用' : this.$refs.add.form.status = '启用'
      row.role === '1' ? this.$refs.add.form.role_id = '超级管理员' : this.$refs.add.form.role_id = '管理员'
    },
    // 点击删除
    async delEvent(id) {
      await this.$confirm('确定要删除吗', '温馨提示')
      if (this.page.page > 1 && this.page.limit === 1) {
        this.page.page--
      }
      await userRemove(id)
      this.getData()
    },
    // 搜索
    async searching() {
      const res = await userList({
        ...this.form, ...this.page
      })
      this.roleList = res.data.items
    },
    async change(id) {
      const res = await userStatus(id)
      console.log(res)
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  // padding: 20px
  .el-form {
    display: flex;
    .el-form-item {
      display: flex;
      margin-left: 10px;
      ::v-deep .el-form-item__label {
        font-size: 16px;
      }
      input {
        height: 40px;
        width: 200px;
      }
    }
    .el-button {
      height: 40px;
      margin: 0 5px;
    }
  }
  .pagination {
    text-align: center;
  }
}
</style>
